<template>
  <div class="goodsinfo-container">

    <transition
     @before-enter="beforeEnter"
     @enter="enter"
     @after-enter="afterEnter">
      <div class="ball" v-show="ballshow" ></div>
    </transition>



    <div class="mui-card">

      <!--内容区-->
      <div class="mui-card-content">
        <swipe v-bind:swipe-list="swipeList" :isfull="false"></swipe>

      </div>


    </div>

    <div class="mui-card">
      <!--页眉，放置标题-->
      <div class="mui-card-header">【现货速发】华为旗下HONOR/荣耀Magic2滑盖全面屏官网正品超级快充麒麟980官方旗舰店新手机v20</div>
      <!--内容区-->
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价<del>￥999</del>&nbsp;&nbsp;销售价：<span class="now_price">￥899</span>
          </p>
          <p>购买数量
            <numbox @getCount="getSelectedCount" :max="max"></numbox>
          </p>
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
          </p>
        </div>
      </div>

    </div>

    <div class="mui-card">
      <!--页眉，放置标题-->
      <div class="mui-card-header">商品参数</div>
      <!--内容区-->
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：</p>
          <p>库存清空：</p>
          <p>上架时间：</p>

        </div>

      </div>
      <!--页脚，放置补充信息或支持的操作-->
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain>图文介绍</mt-button>
        <mt-button type="danger" size="large" plain>商品评论</mt-button>
      </div>
    </div>

  </div>
</template>

<script>
    import { Toast } from 'mint-ui'
    import swipe from '../subcomponents/swipe.vue'
    import numbox from '../subcomponents/goodsinfo_numbox.vue'

    export default {
        data() {
            return {
              swipeList:[],
              ballshow:false,
              selectedCount:1,
              max:1
            }
        },
        created() {
          this.getSwipe()
        },
        methods:{
          addToShopCar(){
              this.ballshow = !this.ballshow

          },
          beforeEnter(el){

            el.style.transform = "translate(0,0)"
          },

          enter(el,done){
            const ballPosition = el.getBoundingClientRect()
            const badgePosition = document.getElementById('badge').getBoundingClientRect()
            var left = badgePosition.left - ballPosition.left
            var top = badgePosition.top - ballPosition.top



            el.style.transform = `translate(${left}px,${top}px)`
            el.style.transition="all 0.8s cubic-bezier(.4,-0.3,1,.68)"
            done(el)
          },
          afterEnter(el){

            this.ballshow = !this.ballshow
          },
          getSelectedCount(count){
            this.selectedCount = count

          },
          getSwipe() {
            // this.$http.get("http://vue.studyit.io/api/getlunbo").then(result => {
            //     if(result.body.status === 0){

            //     }else{
            //         Toast("加载轮播图失败")
            //     }
            // })
            setTimeout(()=>{
              this.swipeList = [
                { img:'https://img.alicdn.com/imgextra/i2/1114511827/O1CN011PMo5IKuqAMkdxE_!!1114511827.jpg_430x430q90.jpg',url:'' },
               ]
              this.max = 5
            },500)


          }
        },
      components:{
          swipe,
          numbox
      }
    }

</script>
<style lang="scss" scoped>
  .mint-swipe {
    height: 200px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .goodsinfo-container {
    background-color: #eee;
    overflow: hidden;
    .ball {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: red;
      position: absolute;
      top: 400px;
      left: 140px;
      z-index: 999;

    }
    .now_price {
      color: red;
      font-size: 16px;
      font-weight: bold;
    }
    .mui-card-footer {
      display: block;
      button {
        margin: 15px 0;
      }
    }
  }
</style>
